<template>
  <div>
    <!-- 发布公告 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">发布公告</el-button>
      </div>
    </div>
    <div class="Notice">
      <br />
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="mt20 ml20"
        status-icon
      >
        <el-form-item label="公告标题" prop="name">
          <el-input
            style="width: 450px; height: 36px"
            v-model="ruleForm.name"
            placeholder="请填写公告标题"
          />
        </el-form-item>

        <el-form-item label="上传图片" prop="name">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <img
              src="../../../assets//img/35.png"
              style="width: 32px; height: 24px"
              alt=""
            />

            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon><Download /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <div class="text">建议您上传640*640像素以上的大图，大小不超过2MB</div>

        <!-- FWB -->
        <el-form-item>
          <div class="Richtext">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="height: 500px"
                v-model="valueHtml"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
              />
            </div>
          </div>
        </el-form-item>

        <div class="text">公告内容最多50000字，可插图。</div>

        <div class="footer">
          <el-form-item>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              立即发布
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from "vue";
import top from "../../../components/top/top.vue";
import "../../../assets/css/size.css";

import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const ruleForm = reactive({
  name: "",
});
const ruleFormRef = ref();
const rules = reactive({
  name: [
    { required: true, message: "请填写公告标题", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

// 操作按钮
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 上传图片
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleDownload = (file) => {
  console.log(file);
};

const handleRemove = (file) => {
  console.log(file);
};

//  富文本
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p>hello</p>");

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// return mode: 'default',
</script>
<style>
/* 图片上传大小修改 */
.el-upload--picture-card {
  --el-upload-picture-card-size: 60px !important;
}
</style>
<style lang="scss" scoped>
.Notice {
  // width: 1610px;
  height: 930px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  margin-left: 10px;
  // overflow: hidden;
  .text {
    width: 286px;
    height: 12px;
    font-size: 12px;
    font-weight: 400;
    color: #abb3c3;
    margin-left: 120px;
  }
  .Richtext {
    margin-top: 20px;
    width: 736px;
    height: 434px;
    background: #ffffff;
    // border: 1px solid #707070;
    opacity: 1;
    border-radius: 0px;
  }
  .footer {
    // width: 1610px;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
    border-radius: 0px;
    display: flex;
    justify-content: center;
    // margin-top: 218px;
    padding-top: 20px;
    margin: 180px 0 0 -20px;
  }
}
</style>
